<template>
    <div class="type-list">
        <div class="item-nav" v-if="detail.label">
            <div class="nav-left"></div>
            <div class="nav-center">{{detail.label}}</div>
            <div class="nav-right">更多</div>
        </div>
        <div v-for="(item, index) in list" :key="index">
            <moduleGameBar :data="item" :showTitle="detail.showTitle" :showCategory="detail.showCategory" :showButton="detail.showButton"/>
        </div>
    </div>
</template>

<script>
export default {
    // 列表 5000
    name: 'model5000',
    props: ['data'],
    data () {
        return {
            detail: {
                label: '',
                showTitle: 1,
                showCategory: 0,
                limit: 3,
                elements: [
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    },
                    {
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: 9.9
                    }
                ]
            }
        }
    },
    created () {
        if (this.data) {
            this.detail.label = this.data.label
        }
        if (this.data && this.data.elements && this.data.elements.length) {
            this.detail = this.data
        }
    },
    watch: {
        data: {
            handler: function (val) {
                if (val) {
                    this.detail.label = val.label
                }
                if (val && val.elements && val.elements.length) {
                    this.detail = val
                }
            },
            deep: true
        }
    },
    computed: {
        list () {
            let arr = this.detail.elements.slice(0, this.detail.limit)
            return arr
        }
    }
}
</script>

<style lang="scss">
    .type-list {
        padding: 18px 0;
        border-bottom: 1px solid rgba(228,228,228,1);
        .item-nav {
            padding: 0 16px;
            display: flex;
            height: 16px;
            align-items: center;
            margin-bottom: 12px;
            .nav-left {
                width:4px;
                height:16px;
                background:rgba(0,191,60,1);
                border-radius:3px;
                margin-right: 8px;
            }
            .nav-center {
                flex: 1;
                font-size:16px;
                font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                font-weight:500;
                color:rgba(28,32,44,1);
            }
            .nav-right {
                margin-right: 4px;
                display: flex;
                align-items: center;
                font-size:12px;
                font-family:SourceHanSansCN-Normal,SourceHanSansCN;
                font-weight:400;
                color:rgba(28,32,44,0.6);
                cursor: pointer;
                &::after {
                    content: '';
                    width: 7px;
                    height: 7px;
                    margin-left: 4px;
                    border-right: 2px solid #1C202C;
                    border-bottom: 2px solid #1C202C;
                    transform: rotate(-45deg);
                }
            }

        }

        .game-item {
            height: 48px;
            margin-top: 16px;
            display: flex;
            align-items: center;
            .game-icon {
                width: 48px;
                height: 48px;
                margin-right: 12px;
                border-radius: 11px;
                background-color:rgb(246, 197, 68);
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .game-content {
                flex: 1;
                padding: 4px 0 3px;
                .game-title {
                    font-size:16px;
                    font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                    font-weight:500;
                    color:rgba(28,32,44,1);
                }
                .game-score {
                    display: flex;
                    align-items: center;
                    margin-top: 2px;
                    .score-icon {
                        width: 12px;
                        height: 12px;
                        background-image: url('./img/score-icon.png');
                        background-size: 100% 100%;
                    }
                    .score-num {
                        margin-left: 4px;
                        font-size:16px;
                        font-family:Roboto-BoldItalic,Roboto;
                        font-weight:normal;
                        color:rgba(0,191,60,1);
                    }
                }
            }
            .game-btn {
                width: 64px;
                height: 24px;
                border-radius:4px;
                border:1px solid rgba(0,191,60,1);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size:14px;
                font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                font-weight:400;
                color:rgba(0,191,60,1);
            }
        }
    }
</style>
